<template>
    <div id="single-choice"
        class="task-single-choice">
        <!-- 每个单选 -->
        <div class="task-single-main"
          :id="'multiple'+opIndex"
          v-for="(option,opIndex) in FormData.multipleData"
          :key="opIndex">
        <Card dis-hover>
          <div class="clearfix" style="margin: 0 0 0 0;">
              <div style="width:470px;float:left;"> {{opIndex+1}}. {{option.subject}} ({{option.score}}分) </div>
          </div>
          <div class="task-single-option option"
            v-for="(choice,chIndex) in option.options"
            :key="chIndex">
              <Checkbox-group
                class="task-el-radio task-el-single-option"
                v-model="FormData.multipleData[opIndex].studentAnswer"
                :label="choiceList[chIndex]!==undefined?choiceList[chIndex]:''">
                <Checkbox :label="option.options[chIndex]" style="margin-top:15px;" :disabled="option.submitted">
                  {{choiceList[chIndex] +". "+option.options[chIndex]}}
                  <span v-if="option.submitted && FormData.multipleData[opIndex].studentAnswer.indexOf(option.options[chIndex]) > -1">
                    <Icon type="checkmark-round" color="green"  v-if="option.yourAnswer.indexOf(option.options[chIndex]) > -1"></Icon>
                    <Icon type="close-round" color="red" v-if="!(option.yourAnswer.indexOf(option.options[chIndex]) > -1)"></Icon>
                  </span>
                </Checkbox>
              </Checkbox-group>
          </div>
          <div style="float: right;margin-top: -32px;">
            <Button type="primary" icon="checkmark-round" title="提交本题" @click="submitQuestion(option, opIndex)" :disabled="option.submitted">提交</Button>
          </div>
        </Card>
        <!-- 题目分割线 -->
        <div class="hr" v-if="opIndex!=FormData.multipleData.length-1"/>
        </div>
    </div>
</template>

<script>
import api from '../../../../api'
export default {
  name: 'single-choice',
  props: ['FormData'],
  data () {
    return {
      visible: false,
      visible2: [],
      choiceList: ['A', 'B', 'C', 'D', 'E', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
    }
  },
  mounted () {
    this.$emit('singleAnswer', 1)
    this.FormData.multipleData.forEach(_ => {
      this.visible2.push(false)
      // 计算之前答题情况分数
      this.FormData.studentScore += Math.round(_.score * _.studentScore)
    })
  },
  methods: {
    submitQuestion (option, opIndex) {
      if (!option.studentAnswer) {
        this.$Message.error('请完成题目后再提交')
      } else {
        // 题目不可用
        option.submitted = true
        let passData = {
          selection_problem_id: option.id,
          homework_id: this.FormData.homework_id,
          classroom_id: parseInt(this.$route.params.classroomId),
          answers: option.studentAnswer
        }
        api.submitHomeworkSelection(passData).then(res => {
          option.yourAnswer = [] // 保存学生的正确答案
          res.data.data.info.forEach(e => {
            e = JSON.parse(e.replace(/'/g, '"')) // 单引号转为双引号，并转成json类型
            if (e.result) {
              option.yourAnswer.push(e.option)
            }
          })
          this.FormData.studentScore += Math.round(option.score * res.data.data.statistic_info.score)
          this.updateHomeworkScore()
        }).catch((e) => {
        })
      }
    },
    updateHomeworkScore () {
      let passData = {
        classroom_id: this.$route.params.classroomId,
        homework_id: this.FormData.homework_id,
        score: this.FormData.studentScore
      }
      // 提交作业分数
      api.postClassroomStudentHomeworkStatus(passData).then(res => {})
    }
  }
}
</script>

<style lang="less" scoped>
.el-row {
    margin-top: 20px;
    margin-bottom: 20px;
    width: 100%;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #E4E7ED;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    line-height: 36px;
    text-align:center;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
    .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
</style>
